define(function(require,exports,module){
	'use strict';

	var React = require('react');
    var ReactAddons = require('reactAddons');
	var $ = require('jquery');
	
	var publicObj = require('lib/public');
	var token = publicObj.get_token();

	/*每日注册用户的列表*/
	var DayRegister = require('components/partial/DayRegister');

	/*API联动下拉框*/
	var SelectOptionApiDiagram = require('components/diagram/SelectOptionApiDiagram');
	
	/*DeviceOpen 联动 饼状图 设备打开量*/
	var SelectOptionOpenDeviceDiagram = require('components/diagram/SelectOptionOpenDeviceDiagram');
	
	/*联动 柱状图 每日新增注册用户数*/
	var SelectOptionDayRegisterDiagram = require('components/diagram/SelectOptionDayRegisterDiagram');
	
	/*联动 折线图 每日用户开机量*/
	var SelectOptionDayOpenDiagram = require('components/diagram/SelectOptionDayOpenDiagram');

	
	/*活跃用户*/
	var UserRecordDiagram = require('components/diagram/UserRecordDiagram');

	/**
	 * 启动次数
	 */
	var StartNumDiagram = require('components/diagram/StartNumDiagram');

	/**
	 * Access日志
	 * @type {[type]}
	 */
	var AccessLogDiagram = require('components/diagram/AccessLogDiagram');
	

	var PureRenderMixin = ReactAddons.addons.PureRenderMixin;
	
	module.exports = React.createClass({
        mixins:[PureRenderMixin],
		getInitialState: function() {
			var hardware = [];
			hardware.push({'key':'iphone','value':'IOS'});
			hardware.push({'key':'android','value':'Android'});
			
		    return {
				data: [],
				hardware_data:hardware
			};
	  	},
		componentDidMount:function(){
            if(this.isMounted()){

                var sql = "select YYYYMMDD as date from qeeniao.api_call_summary group by YYYYMMDD order by YYYYMMDD DESC";
                $.ajax({
                    url:this.props.url,
                    data:{sql:sql,'access_token':token},
                    type:'post',
                    dataType:'json',
                    success:function(o){
                        if(this.isMounted()){
                            this.setState({data:o});
                        }
                    }.bind(this),
                    error:function(xhr,status,err){
                        console.error(sql,status,err.toString());
                    }.bind(this)
                });
            }
		},
		render:function(){
			return (
				<div className="apiDiagram">
					<div className="row">
						<SelectOptionApiDiagram title="API调用量" description="API调用量" data={this.state.data} url={this.props.url}/>
						<SelectOptionOpenDeviceDiagram title="用户设备开机量" description="用户设备开机量" url={this.props.url} date_data={this.state.data} hardware_data={this.state.hardware_data} />
					</div>
					<div className="row">
						<SelectOptionDayRegisterDiagram title="每日新增用户" description="每日新增用户" url={this.props.url} data={this.state.data} />
						<SelectOptionDayOpenDiagram title="每日活跃用户数" description="每日活跃用户数" url={this.props.url} data={this.state.data} hardware_data={this.state.hardware_data} />
					</div>
					<div className="row">
						<UserRecordDiagram title="每日记账次数" description="每日记账次数" url={this.props.url} data={this.state.data} hardware_data={this.state.hardware_data} />
						<StartNumDiagram title="每日启动次数" description="每日启动次数" url={this.props.url} data={this.state.data} hardware_data={this.state.hardware_data} />
					</div>
					<div className='row'>
						<AccessLogDiagram title="下载页访问量统计" url={this.props.url} data={this.state.data} />
					</div>
					<div className="row">
						<DayRegister id_name="register_diagram" title="今日新增注册用户数" description="今日新增注册用户数" url={this.props.url}/>
					</div>
				</div>
			);
		}
	});
	
});